<script setup>

import { Plus, Refresh, Search} from "@element-plus/icons-vue";
import {useStore} from "vuex";
import {onBeforeMount, ref} from "vue";
import { ElMessage } from 'element-plus'
import http from "@/http";
import PageComponent from "@/views/PageComponent.vue";
const store = useStore();
const  aa = () =>{
  store.state.isCollpace = !store.state.isCollpace
}

const value = ref('')

const data = ref([])

const page = ref(1)

const size = ref(5)

const total = ref(0)

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const seas =ref({
  id:'',
  phone:'',
  customerName:'',
  tagNames:'',
  tagIds:'',
  addUserName:'',
  addUserId:'',
  tableExcelName:'',
  tableExcelId:'',
  addState:'',
  createBy:'',
  updateBy:'',
  page:page.value,
  size:size.value
})

const multipleSelection = ref([])


const beforeUpload = (file)=>{
  console.log(file)
  const Xls = file.name.split(".");
  if (Xls[1] === "xls" || Xls[1] === "xlsx" || Xls[1] === "csv") {
     return file;
  } else {
     ElMessage.error("请上传excel格式的文件!");
    return false;
  }
}

const onSuccess = (res) =>{
  ElMessage({
    type:'success',
    message:"导入"+res.data+"条数据成功!"
  })
}

onBeforeMount(()=>{
  SelectClient(page.value,size.value)
})

const SelectClient = (pages,sizes)=>{
  seas.value.page = pages
  seas.value.size = sizes
  console.log(seas.value)
  SelectClientHttp()
}

const SelectClientHttp = ()=>{
  http.post("/Client/SelectClinet",seas.value).then((res)=>{
       data.value = res.data.list
       total.value=res.data.total
  })
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const DeleteClinets = ()=>{
  if (multipleSelection.value.length <= 0) {
    return ElMessage({
       type:'warning',
        message:'请至少选择一个客户'
    })
  }
  console.log(multipleSelection.value)
  let ids =ref([])
  multipleSelection.value.forEach(function (item,index){
      ids.value[index] = item.cid
  })
  DeleteCilentsHttp(ids.value)
}

const DeleteCilentsHttp = (ids)=>{
  http.post("/Client/DeleteManyClient",{ids:ids}).then((res)=>{
      if (res.data>0){
         ElMessage({
           type:'success',
           message:res.msg
         })
         SelectClient(page.value,size.value)
      }else {
        ElMessage({
          type:'error',
          message:res.msg
        })
      }
  })
}
</script>


<template>
  <div>
    <!--   导航区   -->
    <div class="CusSeas1" >
      <el-icon size="23" @click="aa"><Fold /></el-icon>
      <div style="display: inline-block;margin-left: 10px;position: absolute;margin-top: 7px">
        <el-icon size="18" color="dodgerblue"><HomeFilled /></el-icon>
      </div>
      <div style="display: inline-block;margin-bottom: 5px;margin-left: 30px;margin-top: 10px">
        <el-breadcrumb separator="/" >
          <el-breadcrumb-item></el-breadcrumb-item>
          <el-breadcrumb-item>   <span style="font-size: 13px;color: black">引流获客</span> </el-breadcrumb-item>
          <el-breadcrumb-item>   <span style="font-size: 12px;color: gray">客户管理</span>   </el-breadcrumb-item>
          <el-breadcrumb-item>   <span style="font-size: 12px;color: gray">公海客户</span>   </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

    </div>

    <div class="CusSeas2">
      <div style="margin-top: 40px">
        <div style="display: inline-block;margin-left: 40px">
          <span style="font-size:14px;margin-right: 10px;">电 话</span>
          <el-input v-model="seas.phone" style="width: 240px" placeholder="请输入客户电话"  />
        </div>

        <div style="display: inline-block;margin-left: 50px">
          <span style="font-size:14px;margin-right: 10px">客户备注名</span>
          <el-input v-model="seas.customerName" style="width: 240px;height: 30px"  placeholder="请输入备注名"  />
        </div>

        <div style="display: inline-block;margin-left: 50px">
          <span style="font-size:14px;margin-right: 10px">员工名</span>
          <el-input v-model="seas.addUserName"  style="width: 240px" placeholder="请输入员工名"  />
        </div>

        <div style="display:inline-block;margin-left: 40px;margin-top: 30px">
          <span style="font-size:14px;margin-right: 10px">添加状态</span>
          <el-select v-model="seas.addState" placeholder="请输入客户状态" style="width: 240px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>

        <div style="display: inline-block;margin-left: 50px;margin-top: 30px">
          <el-button type="primary" :icon="Search" @click="SelectClient(page,size)">搜 索</el-button>
          <el-button type="info" :icon="Refresh" >清 空</el-button>
        </div>
      </div>



      <div style="margin-left: 40px;margin-top: 30px" >
        <div style="display: inline-block">
          <el-upload
              class="upload-demo"
              :limit="1"
              :before-upload="beforeUpload"
              :on-success="onSuccess"
              action="http://localhost:9988/Client/import"
              name="file"
              :show-file-list="false"
          >
            <el-button type="primary" :icon="Plus"  plain>导入客户</el-button>

          </el-upload>
        </div>

        <div style="display: inline-block;position: absolute;right: 30px">
          <el-button type="primary" plain @click="DeleteClinets">批量删除</el-button>
          <el-button type="primary" plain>批量提醒</el-button>
        </div>
      </div>

      <div style="margin-left: 40px;width: 95%;margin-top: 20px">
        <!--    表格数据区-->
        <el-table
            :data="data"
            row-key="deptId"
            :header-cell-style="{'background-color':'whitesmoke','color':'#58626b'}"
            :row-style="{'height':'50px','font-size':'13px'}"
            :tree-props="{ children: 'children'}"
            @selection-change="handleSelectionChange"
        >
          <!--          default-expand-all-->
          <el-table-column type="selection" width="55" />
          <el-table-column prop="phone" label="电话号码" align="center" width="180px"></el-table-column>
          <el-table-column prop="customerName" label="客户备注姓名" align="center"></el-table-column>
          <el-table-column prop="tagNames" label="客户标签" align="center"></el-table-column>
          <el-table-column prop="addUserName" label="分配员工" align="center"></el-table-column>
          <el-table-column prop="addState" label="当前状态" align="center"></el-table-column>
          <el-table-column prop="createTime" label="导入时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="230px">
            <template #default="scope">
              <el-button size="mini" type="text">
                <el-icon style="margin-right: 5px">
                  <Edit/>
                </el-icon>
                修改
              </el-button>
              <el-button v-if="scope.row.parentId != 0" size="mini" type="text">
                <el-icon style="margin-right: 5px">
                  <Delete/>
                </el-icon>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <div style="margin-top: 20px;margin-left: 400px">
        <PageComponent :page="page" :size="size" :total="total" @select="SelectClient"></PageComponent>
      </div>
    </div>


  </div>

</template>

<style scoped lang="scss">
.CusSeas1{
  width: 100%;
  height: 50px;
}
.CusSeas2{
  width: 100%;
  height: 1000px;
  position: relative;
  top: -30px;
}
::v-deep .el-table__body {
  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
  -webkit-border-vertical-spacing: 10px; // 垂直间距
}

::v-deep .el-table, .el-table__expanded-cell {
  background-color: transparent
}
</style>